<template>
  <div  class="sub-side-left">
    <el-collapse v-model="twoNames">
      <el-collapse-item title="商品类" name="1">
        <div class="one-simple">
          <div class="font-12 cursor-p panel-sty panel-box panel-1" @click="addForm(20)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">商品组</div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="oneNames">
      <el-collapse-item title="图文类" name="1">
        <div class="one-simple">
          <div class="font-12 cursor-p panel-sty panel-box panel-0" @click="addForm(19)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">轮播组</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-2" @click="addForm(12)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">图片</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-3" @click="addForm(11)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">按钮组</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-8" @click="addForm(15)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">搜索框</div>
          </div>
          <div v-if="customPage.pageType == 10"
            class="font-12 cursor-p panel-sty panel-box panel-11" @click="addForm(21)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">悬浮按钮</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-4" @click="addForm(13)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">标题栏</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-5" @click="addForm(16)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">视频</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-6" @click="addForm(17)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">音频</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-7" @click="addForm(14)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">富文本</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-12" @click="addForm(22)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">辅助分割</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-16" @click="addForm(40)" v-if="customPage.appType == 10">
            <span class="icons-tag"></span>
            <div class="mar-t--5">知识内容</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-16" @click="addForm(41)" v-if="customPage.pageType !== 11 && customPage.appType !== 13">
            <span class="icons-tag"></span>
            <div class="mar-t--5">标签导航</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-17" @click="addForm(100)"
               v-if="!isGroupBuyOrStoreHome && customPage.pageType !== 11 && customPage.appType == 10">
            <span class="icons-tag"></span>
            <div class="mar-t--5">店主主页</div>
          </div>
          <div class="font-12 cursor-p panel-sty panel-box panel-19" @click="addForm(33)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">热搜推荐</div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>      
    <el-collapse v-model="threeNames" v-if="customPage.appType == 10">
      <el-collapse-item title="营销类" name="1">
        <div class="one-simple">          
          <div class="font-12 cursor-p panel-sty panel-box panel-10" @click="addForm(30)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">小程序直播</div>
          </div>
          <div v-if="customPage.homeType == 1 || customPage.homeType == 2 || customPage.pageType == 11" class="font-12 cursor-p panel-sty panel-box panel-9" @click="addForm(31)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">秒杀组</div>
          </div>
         <div v-if="getEnterpriseConfig().groupBuyAuthority == 1 && customPage.homeType !== 1" class="font-12 cursor-p panel-sty panel-box panel-18" @click="addForm(32)">
            <span class="icons-tag"></span>
            <div class="mar-t--5">社区团购</div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  props: {
    customPage: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      oneNames: ['1'],
      twoNames: ['1'],
      threeNames: ['1'],

      isGroupBuyOrStoreHome: false
    }
  },
  created() {
    this.$set(this.customPage, 'appType', this.customPage.appType ? this.customPage.appType * 1 : 10)
    this.isGroupBuyOrStoreHome = this.getEnterpriseConfig().groupBuyAuthority * 1 === 1 || this.getEnterpriseConfig().storeHomeAuthority * 1 === 1
  },
  mounted() {
  },
  methods: {
    addForm(type, details) {
      this.$emit('addForm', type, details)
    }
  }
}
</script>

<style lang="less" scoped>
@sideWhite: 66px;
@sideSubWhite: 298px;
@sideRightWhite: 390px;
@height: 60px;
.sub-side-left{
  background: #fff;
  color: #989FAC;
  width: @sideSubWhite;
  height: 100%;
  padding: 6px 0;
  box-sizing: border-box;
  position: fixed;
  left: @sideWhite;
  top: @height;
  z-index: 10;
  /deep/ .el-collapse{
    border-bottom: none;
    &:first-child{
      border-top: none;
    }
    .el-collapse-item__header{
      font-size: 12px;
      color: #333;
      height: auto;
      line-height: 1;
      padding: 19px 0 13px 30px;
    }
    .el-collapse-item__wrap{
      border-bottom: none;
      overflow: visible;
    }
    .el-collapse-item__arrow.is-active{
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
    .el-collapse-item__arrow{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    .el-collapse-item__content{
      padding-bottom: 9px;
    }
    .one-simple{
      padding: 0 10px 18px 10px;
      &:after{
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
      &:last-child{
        padding: 0 10px;
      }
      .panel-sty{
        width: 33.33%;
        text-align: center;
        float: left;
        height: 75px;
        color: #989FAC;
        span{
          width: 40px;
          height: 40px;
          margin-top: 6px;
          display: inline-block;
        }
      }
      .panel-box{          
        &:hover{
          color: #409EFF;
          border-radius: 6px;
          box-shadow: 0 0 6px rgba(133, 133, 133, 0.2);
        }
      }
    }
    .panel(20);
    .panel(@n, @i: 0) when (@i =< @n) {
      .panel-@{i} {
        span{          
          background: url("@/../../../../../assets/images/panel-home-@{i}.png") no-repeat;
        }
        &:hover{          
          span{
            background: url('@/../../../../../assets/images/panel-home-@{i}a.png') no-repeat;
          }
        }
      }
      .panel(@n, (@i + 1));
    }
  }
}
</style>
